<template>
  <div class="subject">
    <span> {{num.firstNum}} </span>
    <span>+</span>
    <span> {{num.lastNum}} </span>
    <span>=</span>
    <input v-model.trim="answer" @blur="shijiao" type="number" />
    <button @click="sub">提交</button>
  </div>
</template>

<script>
export default {
props:{
  num:{
    type: Object,
    required: true
  }
},
data() {
  return {
    answer:''
  }
},
methods: {
  sub(){
    if(this.answer.length==0) return alert('不能为空')
    if(this.answer == this.num.firstNum+this.num.lastNum){
       this.num.isTrue = 'right'
    }else{
      this.num.isTrue = 'error'
    }
   
    // this.$emit('',this.answer == this.num.firstNum+this.num.lastNum)
  },
  shijiao(){
    this.answer.length==0?this.num.isTrue = 'undo':''
  }
}
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>